<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>客户管理</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @search="search"
        @reset="reset"
      />
      <v-tableBtns
        :table-title="exportTitle"
        :table-data="exportData"
      />
      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        :deletable="false"
        :editable="false"
        :readable="true"
        @sortChange="sortChange"
        @read="read"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>

  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import UploadExcelComponent from '@/components/UploadExcel/index.vue'

export default {
  name: 'Home',
  components: { UploadExcelComponent },
  data() {
    return {

      formTitle: [
        {
          cn: '客户名称：',
          en: '客户名称'
        },
        {
          cn: '客户简称：',
          en: '客户简称'
        },
        {
          cn: '客户电话：',
          en: '客户电话'
        },
        {
          cn: '商务负责人：',
          en: '负责人'
        },
        {
          cn: '状态：',
          en: '状态',
          type: 'select',
          list: [
            {
              label: '潜在客户',
              value: '潜在客户'
            },
            {
              label: '初步接触',
              value: '初步接触'
            },
            {
              label: '持续跟进',
              value: '持续跟进'
            },
            {
              label: '成交客户',
              value: '成交客户'
            },
            {
              label: '忠诚客户',
              value: '忠诚客户'
            },
            {
              label: '无效客户跟进',
              value: '无效客户跟进'
            }
          ]
        }
      ],
      filter_info: {},
      tableTitle: [
        {
          cn: '名称',
          en: '客户名称',
          sortable: true
        },
        {
          cn: '客户简称',
          en: '客户简称'
        },
        {
          cn: '客户电话',
          en: '客户电话'
        },
        {
          cn: '创建时间',
          en: '创建时间',
          sortable: true
        },
        {
          cn: '客户状态',
          en: '客户状态',
          sortable: true
        },
        {
          cn: '商务负责人',
          en: '负责人',
          sortable: true
        }
      ],
      tableData: [],
      exportTitle:[],
      exportData:[],
      // 排序
      sidx: '创建时间',
      sortKey: null,

      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      }
    }
  },
  activated() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      const loading = this.$loading()
      const datas = {
        ...this.filter_infos,
        sidx: this.sidx,
        sortKey: this.sortKey,
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize
      }
      this.$get('action/Client/dataGrid', datas)
        .then(res => {
          let list
          if (res.data.list && res.data.list.length) {
            list = res.data.list.map((item, index) => {
              item.创建时间 = this.$parseTime(item.创建时间)
              item.客户电话 = item.客户电话 ? JSON.parse(item.客户电话)[0].telNum : ''
              return item
            })
          }
          this.pageInfo.totalPage = res.data.totalPage
          this.pageInfo.totalRow = res.data.totalRow

          this.tableData = list || []
            loading.close()
        })
        .catch(_=>{
          loading.close()
        })
    },
    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },

    reset() {
      this.filter_info = {}
      this.getTableList()
    },

    read(val) {
      this.$router.push({
        name: 'private.check_info',
        query: { id: val.row.id, name: val.row.客户名称 }
      })
    },
    // 排序
    sortChange({ column, prop, order }) {
      console.log(column, prop, order)
      this.sidx = prop || '创建时间'
      this.sortKey = order === 'ascending' ? 'asc' : null
      this.getTableList()
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ]),
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.start_time = origin[key][0]
          data.End_time = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
